<script setup>
	import {
		navigateBack,
	} from "@/assets/scripts/navigate.js"

	import {
		onMounted,
		ref
	} from "vue";

	import {
		sarchMeMemorialListApi,
		getLishiApi,
	} from '@/assets/api/other/search.js'

	import searchSacrificeCard from "@/components/searchSacrificeCard.vue"

	const keyword = ref('')
	const isShowTip = ref(true)
	const searchSacrificeList = ref([])
	const list1 = ref([])
	const list2 = ref([])
	const pageNum = ref(1)
	const total = ref(10)
	const loading = ref(true)

	const handleMore = () => {
		if (loading.value) return
		loading.value = true
		pageNum.value = pageNum.value + 1
		handleSearch()
	}

	const recordHistory = () => {
		if (!list1.value.includes(keyword.value)) {
			list1.value.push(keyword.value)
		}
		uni.setStorageSync('history', list1.value)
	}

	const handleSearch = () => {
		if (!keyword.value) return
		// console.log(keyword.value);
		// 记录历史
		recordHistory()
		searchSacrificeList_init()
		list2_init()
		isShowTip.value = false
	}

	const tag_handleClick = (word) => {
		keyword.value = word
		pageNum.value = 1
		handleSearch()
	}

	const handleInput = () => {
		if (keyword.value == '') {
			isShowTip.value = true
		}
	}

	const searchSacrificeList_init = async () => {
		const res = await sarchMeMemorialListApi(keyword.value, pageNum.value)
		if (res.code === 200) {
			total.value = res.total
			const rows = res.total <= (pageNum.value - 1) * 10 ? [] : res.rows
			searchSacrificeList.value = [...searchSacrificeList.value.slice(0, (pageNum.value - 1) * 10), ...rows]
			loading.value = false
		}
	}

	const handleClear = () => {
		list1.value = []
	}

	onMounted(() => {
		list1_init()
		list2_init()
	})

	const list1_init = () => {
		list1.value = uni.getStorageSync('history') || []
	}

	const list2_init = async () => {
		const res = await getLishiApi()
		if (res.code === 200) {
			list2.value = res.data
		}
	}
</script>

<template>

	<view :class="[{'bg-grey-fill':!isShowTip}]">
		<uv-navbar :fixed="false" bgColor="#f5f5f5" @leftClick="navigateBack" title="搜索">
		</uv-navbar>

		<view class="p-normal pt-small pb-small bg-white">
			<view class="py-small d-flex">
				<uv-input class="d-flex-fx1 mr-normal" :prefixIconStyle="{'font-size': '24px', color:'#999999'}"
					:customStyle="{background:'#f2f2f2', 'border-radius': '17px', height:'20px', 'border': '0px'}"
					prefixIcon='search' placeholder="请输入纪念馆或者逝者名称" v-model="keyword" @change='handleInput'>
				</uv-input>
				<uv-button type="success" text="搜索" shape='circle' :customStyle="{height:'32px'}"
					@click="handleSearch"></uv-button>
			</view>
		</view>

		<view v-show="isShowTip">
			<template v-if="list1.length">
				<view class="d-flex d-flex-jcsb px-normal mt-big">
					<view class="">
						历史搜索
					</view>
					<uni-icons type="trash" size="22" @click="handleClear"></uni-icons>
				</view>

				<view class=" mt-small px-normal">
					<view class="d-flex d-flex-fww px-normal">
						<view class="keyword-tag" v-for="(item, index) in list1" :key="index"
							@click="tag_handleClick(item)">
							{{item}}
						</view>
					</view>
				</view>

			</template>

			<view class="d-flex d-flex-jcsb px-normal mt-big">
				<view class="">
					热门搜索
				</view>
				<uni-icons type="fire-filled" size="22"></uni-icons>
			</view>

			<view class=" mt-small px-normal">
				<view class="d-flex d-flex-fww px-normal">
					<view class="keyword-tag" v-for="(value, key, index) in list2" :key="index"
						@click="tag_handleClick(key)">
						{{key}}
					</view>
				</view>
			</view>
		</view>

		<view v-show="!isShowTip" class="mt-normal">
			<uv-empty class="py-normal" mode="list" icon="empty-favor" style="background-color: #fff"
				v-if="!searchSacrificeList.length"></uv-empty>
			<uv-row class="mb-normal px-normal" v-for="(item,index) in searchSacrificeList" :key="index">
				<uv-col>
					<searchSacrificeCard :data="item">
					</searchSacrificeCard>
				</uv-col>
			</uv-row>
			<uv-button class="mb-normal" style="width: 100;" v-if="!loading && total > pageNum * 10" type="success"
				text="查看更多" @click="handleMore"></uv-button>
		</view>
	</view>


</template>

<style lang="scss" scoped>
	.keyword-tag {
		padding: 0 10px;
		margin-right: 10px;
		margin-top: 8px;
		height: 32px;
		border-radius: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		background-color: #f2f2f2;
		color: #6b6b6b;
	}

	.item {
		background-color: #fff !important;
	}
</style>